<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="bp" value="${pageContext.request.contextPath}"></c:set>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<jsp:useBean id="timestamp" class="java.util.Date"/>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<link href="${bp}/static/css/bksystem.css" rel="stylesheet" type="text/css" />
		<link href="${bp}/static/skin/black/skin.css" rel="stylesheet" type="text/css" id="skin" />
		<link href="${bp}/static/css/module.css" rel="stylesheet" type="text/css" />
		<link href="${bp}/static/font/iconfont.css" rel="stylesheet" type="text/css" />
		<title>登录</title>
	</head>
	<body class="login-layout Reg_log_style" id="loginstyle">
		<div class="logintop">
			<span>后台管理界面平台</span>
			<ul>
				<li>
					<a href="#">返回首页</a>
				</li>
				<li>
					<a href="#">帮助</a>
				</li>
				<li>
					<a href="#">关于</a>
				</li>
			</ul>
		</div>
		<div class="loginbody">
			<div class="login-container">
				<div class="center"> <img src="${bp}/static/images/logo.png" /></div>
				<div class="space-6"></div>
				<div class="position-relative">
					<div id="login-box" class="login-box widget-box no-border visible">
						<div class="login-main">
							<!--皮肤选择-->
						<div class="skin-section">
							<a href="javascript:void(0)" class="skin-btn clickBombbox iconfont icon-pifushezhi" id="skin-btn"></a>
							<div class="Bombbox">
								<ul class="skin-list">
									<li>
										<a class="colorpick-btn" href="javascript:void(0)" data-val="black" id="default" style="background-color:#222A2D"></a>
									</li>
									<li>
										<a class="colorpick-btn" href="javascript:void(0)" data-val="blue" style="background-color:#438EB9;"></a>
									</li>
									<li>
										<a class="colorpick-btn" href="javascript:void(0)" data-val="green" style="background-color:#72B63F;"></a>
									</li>
									<li>
										<a class="colorpick-btn" href="javascript:void(0)" data-val="gray" style="background-color:#067350;"></a>
									</li>
									<li>
										<a class="colorpick-btn" href="javascript:void(0)" data-val="red" style="background-color:#FF6868;"></a>
									</li>
									<li>
										<a class="colorpick-btn" href="javascript:void(0)" data-val="purple" style="background-color:#6F036B;"></a>
									</li>
								</ul>
							</div>
						</div>
							<div class="clearfix">
								<div class="login_icon"><img src="${bp}/static/images/login_img.png" /></div>
								<span>${message}</span>
								<form class="login-form" action="${bp}/user/cookie" method="post" style=" width:300px; float:right; margin-right:50px;">
									<h4 class="title_name"><img src="${bp}/static/images/login_title.png" /></h4>
									<fieldset>
										<ul>
											<li class="frame_style form_error"><label class="user_icon iconfont">&#xe620;</label><input name="username" type="text" data-name="用户名" id="username" /><i></i></li>
											<li class="frame_style form_error"><label class="password_icon iconfont">&#xe625;</label><input name="password" type="password" data-name="密码" id="password" /><i></i></li>
											<li class="frame_style form_error"><label class="Codes_icon iconfont">&#xe624;</label><input name="verify" type="text" data-name="验证码" id="verify" /><i></i>
												<div class="Codes_region" >
                                                    <img src="http://localhost:8080/user/captcha" onclick="Code()" id="img" width="100%" height="38px">
                                                </div>
											</li>
										</ul>
										<div class="space"></div>
										<div class="clearfix">
											<label class="inline">
                                      <input type="checkbox" class="ace">
                                      <span class="lbl">保存密码</span>

                                  </label>
											<button type="button "  onclick="login()" class="login_btn" id="login_btn"> 登&nbsp;陆 </button>
										</div>

										<div class="space-4"></div>
									</fieldset>
								</form>
							</div>
							<div class="social-or-login center">
								<span class="bigger-110">通知</span>
							</div>
							<div class="social-login ">
								为了更好的体验性（兼容移动端），本网站系统不再对IE8（含IE8）以下浏览器支持，请见谅。
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="loginbm">版权所有 2016</div>
	</body>
	<script src="${bp}/static/js/jquery-1.9.1.min.js"></script>
	<script src="${bp}/static/js/jquery.cookie.js" type="text/javascript"></script>
	<script src="${bp}/static/js/jquery.nicescroll.js" type="text/javascript"></script>
	<script src="${bp}/static/js/BKframe.js" type="text/javascript"></script>
	<script src="${bp}/static/js/html5shiv.js" type="text/javascript"></script>
	<script src="${bp}/static/js/css3-mediaqueries.js" type="text/javascript"></script>


<script type="text/javascript">



	function login() {

		var username = $("#username").val()
		var password = $("#password").val()
		var verify = $("#verify").val()

		$.ajax({
			type:"post",
			url:"${bp}/user/cookie",
			data:{"username":username,"password":password,"verify":verify},
			success : function (msg) {
				if(msg == 1){
					alert("验证码错误")
					window.location.reload()
				}
				if(msg == 2){
					window.location = "/user/index"
				}
				if(msg == 3){
					alert("登陆失败！！")
					window.location = "login.jsp"
				}
			}
		})

	}


	// 更换验证码

    function Code() {
        document.getElementById("img").src = "http://localhost:8080/user/captcha?" + Math.random();

    }
	//验证登录
	$(document).ready(function() {
		$("input[type='text'],input[type='password']").blur(function() {
			var $el = $(this);
			var inputname=0;
			var $parent = $el.parent();
			$parent.attr('class', 'frame_style').removeClass(' form_error');
			if($el.val() == '') {
				var name=$el.attr("data-name");
				$parent.attr('class', 'frame_style').addClass(' form_error form_prompt');
				$parent.find('i').eq(inputname).html(name+"不能为空").addClass("prompt");
			}
		});
		$("input[type='text'],input[type='password']").focus(function() {
			var $el = $(this);
			var $parent = $el.parent();
			if($el.val() == '') {
				$parent.attr('class', 'frame_style').addClass(' form_errors');
			} else {
				$parent.attr('class', 'frame_style').removeClass(' form_errors');
			}
		});
	  $('#login_btn').on('click', function() {
		var num = 0;
		var str = "";
		$("input[type$='text'],input[type$='password']").each(function(n) {
			var $el = $(this);
			var inputname=0;
			var $parent = $el.parent();
			if($el.val() == "") {
				var name=$el.attr("data-name");
				$parent.attr('class', 'frame_style').addClass(' form_error form_prompt');
                 $parent.find('i').eq(inputname).html(name+"不能为空").addClass("prompt");
				num++;
				return false;
			}
		});
		if(num > 0) {
			return false;
		} else {
			//ajax 判断用户名是否存在
			location.href = "index.html";
		}
	});
	})
	//框架设置
	$(function() {
		$("#loginstyle").BKframe({
               //必须保留否则无法进行皮肤更换，以及兼容移动端

		})
	});
</script>
</html>